<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <div class="location-text"><i class="iconfont icon-angle-left" @click="toback"></i>商家列表</div>
    </header>
    <!-- 商家列表部分 -->
    <ul class="business" :model="businessForm">
<!--      <p>{{businessForm.businessList }}</p>-->
      <li v-for="item in businessForm.businessList" @click="toBusinessInfo(item.businessId)">
        <div class="business-img">
          <img :src="item.businessImg">
          <div class="business-img-quantity" v-show="item.quantity>0">
            {{item.quantity}}</div>
        </div>
        <div class="business-info">
          <h3>{{item.businessName}}</h3>
          <p>&#165;{{item.startPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
          <p>{{item.businessExplain}}</p>
        </div>
      </li>
    </ul>
    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>
<script setup>
import { ref,onMounted,watch} from 'vue';

import { useCommon } from '@/hooks/common';
import {ElMessage, ElMessageBox} from "element-plus";
const {router,cartStore,businessStore,route, globalProperties,Footer} = useCommon();

const businessForm=ref({
  orderTypeId:'',
  businessList:[],
  user:{}
})

const cartForm=ref({
  businessId:'',
  userId:'',
  cartList:[],
})

const getBusinessList = async () => {
  //把对象变成数组
  //根据orderTypeId查询商家信息
  businessForm.value.orderTypeId=route.query.orderTypeId
  await businessStore.listBusinessByOrderTypeId(businessForm.value.orderTypeId)
    businessForm.value.businessList= businessStore.businessList
    businessForm.value.user =JSON.parse(sessionStorage.getItem('userInfo'));

    if(businessForm.value.user!=null){
      await listCart();
    }
}


// const listCart = () => {
//
//   cartForm.value.userId=businessForm.value.user.userId
//   cartStore.getCartList(cartForm.value.userId,cartForm.value.businessId)
//   cartForm.value.cartList=cartStore.cartList
//   //遍历所有食品列表
//   for(let businessItem of businessForm.value.businessList){
//     // 直接将其赋值为0，那么该属性将被添加到 businessItem 对象中。
//     businessItem.quantity = 0;
//     for(let cartItem of cartForm.value.cartList){
//       if(cartItem.businessId==businessItem.businessId){
//         businessItem.quantity += cartItem.quantity;
//       }
//     }
//   }
//   businessForm.value.businessList.sort();
// }

const open = () => {
  ElMessageBox.confirm(
      '请先登录',
      'Warning',
      {
        confirmButtonText: '点击去往登录页面',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '去往登录页面成功',
        })
        router.push({path:'/login'})
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消去往登录页面',
        })
      })
}


const toBusinessInfo = (businessId) => {
  if (businessForm.value.user==null){
    open();
  }else {
    // 如果businessId的值为123，则执行该代码后，页面的URL将变为/businessInfo?query=123。
    //注意query: {businessId} 这里需要大括号括号起来
    router.push({path:'/businessInfo',query: {businessId}})
  }

}

const toback = () => {
  router.push({path:'/index'})
}

getBusinessList()


</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}
/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper header .location-text {
  font-size: 4.5vw;
  font-weight: 700;
  color: #fff;
}
.wrapper header .location-text .icon-angle-left{
  position: relative;
  right: 122px;
}
/****************** 商家列表部分 ******************/
.wrapper .business {
  width: 100%;
  margin-top: 12vw;
  margin-bottom: 14vw;
}
.wrapper .business li {
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  border-bottom: solid 1px #DDD;
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.wrapper .business li .business-img {
  /*这里设置为相当定位，成为business-img-quantity元素的父元素*/
  position: relative;
}
.wrapper .business li .business-img img {
  width: 20vw;
  height: 20vw;
}
.wrapper .business li .business-img .business-img-quantity {
  width: 5vw;
  height: 5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;
  border-radius: 2.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  /*设置成绝对定位，不占文档流空间*/
  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}
.wrapper .business li .business-info {
  margin-left: 3vw;
}
.wrapper .business li .business-info h3 {
  font-size: 3.8vw;
  color: #555;
}
.wrapper .business li .business-info p {
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}

</style>
